import React from 'react';
import { Button, Input, Popconfirm, Table, Tag } from 'antd';
import moment from 'moment';
import style from './index.less'
import EditOfferModal from "./editOfferModal";
import styles from "./index.less";

export default class MainTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userTable: {},
      loading: false,
      modalVisible: false,
    }
    this.columns = [
      {
        title: '#',
        dataIndex: 'key',
        key: 'key',
        width: 55,
      },
      {
        title: '饮用水名称',
        dataIndex: 'machine_name',
        key: 'machine_name',
        width: 300,
      },
      {
        title: '库存数量',
        dataIndex: 'total_count',
        key: 'total_count',
        width: 100,
        sorter: (a, b) => a.total_count - b.total_count,
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: '发货地点',
        dataIndex: 'location',
        key: 'location',
        width: 100,
      },
      {
        title: '出售单价',
        dataIndex: 'unit_price',
        key: 'unit_price',
        width: 120,
        sorter: (a, b) => a.unit_price - b.unit_price,
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: '详细说明',
        dataIndex: 'detail',
        key: 'detail',
        width: 300,
      },
      {
        title: '发布时间',
        dataIndex: 'release_time',
        key: 'release_time',
        width: 180,
        render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
        sorter: (a, b) => a.release_time - b.release_time,
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: '操作',
        key: 'action',
        width: 150,
        render: (record) => <div>
          <Popconfirm title={`你确定要删除该记录吗？`}
                      onConfirm={this.onDelete.bind(this, record)}
                      okText="确定"
                      okButtonProps={{ danger: true }}
                      cancelText="取消"
                      placement="rightBottom"
          >
            <Button type='link'>删除</Button>
          </Popconfirm>
          <Button onClick={this.onActionBtnClick.bind(this, record)} type='link' style={{color: 'blue'}}>编辑</Button>
        </div>
      },
    ];
  }

  // handler
  onDelete = async record => {
    await this.setState({ dataLoading: true });
    await this.props.dispatch({type: 'offerSideModel/deleteMyProduct', payload: {productListId: record.id}});
    await this.setState({ dataLoading: false });
  };

  showModal = () => {
    this.setState({modalVisible: true});
  };

  onActionBtnClick = async record => {
    await this.setState({myProductList: record});
    await this.setState({location: record.location},()=>{console.log("->",this.state.location)});
    await this.showModal();
  };

  hideModal = () => {
    this.setState({modalVisible: false});
  };


  initData = async () => {
    await this.setState({ dataLoading: true });
    await this.props.dispatch({type: 'offerSideModel/getMyProductList'});
    await this.setState({ dataLoading: false });
  };

  componentDidMount() {
    this.initData().then(() => null);
  }

  // render
  renderTable = () => {
    return (
        <div  className={styles.table_wrapper}>
          <Table columns={this.columns}
                 dataSource={this.props.dataSource}
                 scroll={{ x: 'max-content' }}
                 size="small"
                 loading={this.state.dataLoading}
                 bordered
          />
          <EditOfferModal visible={this.state.modalVisible} hide={this.hideModal} myProductList={this.state.myProductList} location={this.state.location}/>
        </div>
    );
  };

  render() {
    return (
        <div>
          {this.renderTable()}
        </div>
    );
  }

}
